<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<div>
				<el-button v-prmis="'sale_orders_exportRefund'" type="primary" @click="getsaorder">{{
					$t('marketing.preferential.exportOrder') }}</el-button>
				<!-- <el-button type="primary" @click="getBrandOrder">{{
					data.payment.supplier ?
						'查看全部订单' : '查看品牌方订单' }}</el-button> -->
			</div>
		</div>
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" height="690">
				<el-table-column prop="machine_id" :label="$t('machine.code')">
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="machine_name" :label="$t('machine.name')">
					<template #default="scope">
						{{ scope.row.machine_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="trade_no" :label="$t('marketing.preferential.orderCode')" width="145">
					<template #default="scope">
						{{ scope.row.trade_no || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="refund_trade_no" :label="$t('order.payment.refundCode')">
					<template #default="scope">
						{{ scope.row.refund_trade_no || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="channel_position" :label="$t('order.consume.location')">
					<template #default="scope">
						{{ scope.row.channel_position == 1 ? $t('order.consume.main') : $t('order.consume.auxiliary') }}
					</template>
				</el-table-column>
				<el-table-column prop="channel_code" :label="$t('order.consume.slot')">
					<template #default="scope">
						{{ scope.row.channel_code || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="g_name" :label="$t('machine.goods.name')">
					<template #default="scope">
						{{ scope.row.g_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="refund_amount" :label="$t('order.payment.refundAmount')">
					<template #default="scope">
						{{ scope.row.refund_amount || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="refund_quantity" :label="$t('order.consume.quantityRefund')">
					<template #default="scope">
						{{ scope.row.refund_quantity || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="nickname" :label="$t('order.consume.consumer')">
					<template #default="scope">
						{{ scope.row.nickname || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						<span v-if="scope.row.status == 1">{{ $t('order.payment.submitRefund') }}</span>
						<span v-if="scope.row.status == 2">{{ $t('public.refunded') }}</span>
						<span v-if="scope.row.status == 3">{{ $t('public.refundFailed') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="update_time" :label="$t('date.refundTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.update_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column prop="remark" :label="$t('order.consume.remark')">
					<template #default="scope">
						{{ scope.row.remark || '--' }}
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.payment" @exposeData="current" @fraction="fraction" />
		</div>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getRefundList, exportRefund } from '@/api/order';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
import { getgroupList } from '@/api/machine_type';
let data = reactive({
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('marketing.preferential.orderCode'), type: 'input', value: '', key: 'trade_no' },
		{ title: $t('order.payment.refundCode'), type: 'input', value: '', key: 'refund_trade_no' },
		{ title: $t('date.refundTime'), type: 'time', value: '', key: 'create_time' },
		{
			title: $t('order.goods.pay'), type: 'define', select: [
				{ label: $t('order.goods.free'), value: '0' },
				{ label: $t('order.goods.WeChatPay'), value: '1' },
				{ label: $t('order.goods.alipayPay'), value: '2' },
				{ label: $t('order.goods.JD'), value: '4' },
			], value: '', key: 'pay_type'
		},
		{ title: $t('machine.group'), type: 'linkages', select: [], props: {}, value: '', key: 'machine_group_id', strictly: true }
	],
	list: [], // 列表信息
	payment: { // 筛选数据
		m_id: '',
		trade_no: '',
		refund_trade_no: '',
		create_time: '',
		pay_type: '',
		page: 1,
		pageNum: 15,
		supplier: true,
	},
	total: 0, // 总条数
})
const dialogExport = ref(false)
// 设备分组列表
const propsss = reactive(
	{
		checkStrictly: true,
		lazy: true,
		async lazyLoad(node: any, resolve: any) {
			const { level, value } = node
			let nodes = await getgroupList({ pid: value });
			if (nodes.state == 100 || nodes.state == 300) {
				resolve([]);
			}
			const nodesa = nodes.data.map((item) => ({
				value: item.mg_id,
				label: item.mg_id + '-' + item.mg_name
			}))
			resolve(nodesa);
		}
	}
)
data.lookup[5].props = propsss
// 导出订单
let getsaorder = () => {
	let obj = {}
	let status = false
	for (let key in data.payment) {
		if (key != 'page' && key != 'pageNum') {
			obj[key] = data.payment[key]
			if (obj[key] != '') {
				status = true
			}
		}
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportRefund(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})

}

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getRefundList(data.payment).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}
// 查看品牌方订单
let getBrandOrder = () => {
	data.payment.supplier = !data.payment.supplier
	getlist()
}
// 查询回调
let inves = (e) => {
	data.payment.create_time = ''
	for (let key in e) {
		if (key != 'create_time') {
			data.payment[key] = e[key]
		}
	}
	if (e.create_time != '') {
		data.payment.create_time = e.create_time[0] + '~' + e.create_time[1]
	}
	data.payment.machine_group_id = e.machine_group_id[e.machine_group_id.length - 1]
	data.payment.page = 1
	data.payment.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.payment.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.payment.pageNum = e
	getlist()
}

getlist()

</script>
